<template>
	<view class="detail">
		<view class="detail_content">
			<swiper :autoplay="true" class="swiper" :indicator-dots="true">
				<swiper-item v-for="(item,index) in details.imgList" :key='index'>
					<view class="image-wrapper">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="introduce-section">
				<view style="font-size: 32upx;">{{details.title}}</view>
				<view class="section_neam">
					<text><text style="font-size: 28upx;margin-right: 8upx;">¥</text>{{details.price/100}}</text>
					<text style="color: #CCCCCC;font-size: 25upx;margin: 0px 15upx;">¥{{details.status}}</text>
					<view class="section_special">
						<view>{{details.price/10}}折</view>
					</view>
				</view>
				<view class="section_text">
					<view>销量:{{details.sales}}</view>
					<text>库存:{{details.stock}}</text>
				</view>
			</view>
			<view class="c-list">
				<view class="c-row">
					<view class="c-rows" @click="rowsSelect()">
						<view style="width: 180upx;">购买类型</view>
						<text>选择器</text>
						<view>></view>
					</view>
				</view>
				<view class="c-row">
					<view class="c-rows" @click="discount()">
						<view style="width: 180upx;">优惠券</view>
						<text style="color:#EE0A24;">领取优惠券</text>
						<view>></view>
					</view>
				</view>
				<view class="c-row">
					<view class="c-rows">
						<view style="width: 180upx;">配送费用</view>
						<text>单笔购买满¥0元免邮费</text>
					</view>
				</view>
				<view class="c-row" v-for="(item,index) in details.attributeList" :kye="index">
					<view class="c-rows">
						<view style="width: 180upx;">{{item.attribute}}</view>
						<text>{{item.value}}</text>
					</view>
				</view>
			</view>
			<view :class="!show==false?'mask':''" @click="mask()"></view>
		</view>
		<view class="eva-section">
			<view v-for="(item,index) in appraisePage.items" :key='index' v-if="index<=0">
				<view class="e-header" @click="comment()">
					<view class="tit">评论<text style="color: #909399;">(2)</text></view>
					<view class="tip">全部评论<text>></text></view>
				</view>
				<view class="eva-box">
					<view class="icon-you">
						<image :src="item.userAvatarUrl"></image>
						<view class="right">
							<view class="name">{{item.userNickName}}</view>
							<view class="namecon">{{item.content}}</view>
							<view class="bot">
								<view>购买类型: {{item.skuTitle}}</view>
								<view>{{item.gmtCreate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header">
				<view><text>图文详情</text></view>
			</view>
			<view class="rich-img">
				<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
					<rich-text :nodes="detaila" style="width: 50px;height: 20px;"></rich-text>
				</view>
			</view>
		</view>
		<view class="popup_spec" v-if="show">
			<view class="popup_tier"></view>
			<view class="popup_man">
				<view class="popup_top">
					<view>
						<view class="popup_manImg" v-for="(item,indexs) in details.imgList" :key='indexs'>
							<image style="width: 100%;height: 200upx;" :src="item" v-if="indexs<=0"></image>
						</view>
					</view>
					<view class="popup_manlist" v-for="(item,indexd) in details.skuList" :key='indexd'>
						<view v-if="indexd<=0" style="width: 500upx;">
							<view style="color: #FA436A;">¥{{item.price/100}}</view>
							<view>库存: {{item.title}}</view>
							<view>已选: {{item.stock}}</view>
						</view>
					</view>
				</view>
				<view class="popup_Name">
					<view style="width: 100%;padding: 20upx 0;">规格</view>
					<view class="popup_manName">
						<view class="popup_manText" v-for="(item,indexx) in details.skuList" :key='indexx'>
							<view @click="specific(indexx)" :class="specification==indexx?'speci':''"><text>{{item.title}}</text></view>
						</view>
					</view>
				</view>
				<view class="uni-number">
					<view>数量</view>
					<uni-number-box @change="bindChange"></uni-number-box>
				</view>
				<view class="confirm-btns" @click="creates()">
					<text> 完成 </text>
				</view>
			</view>
		</view>
		<view class="mask_show" v-if="iscount">
			<view :class="!iscount==false?'mask':''" @click="mask()"></view>
			<scroll-view scroll-y="true" class="mask-content">
				<view class="coupon-item" v-for="(item,index) in addDiscount" :key='index' @click="discounts()">
					<view class="con">
						<view class="con_left">
							<view class="con_leftTop">{{item.title}}</view>
							<view class="con_leftDottom">在领取后{{item.total}}天内有效。可领{{item.limit}}张，已领{{item.nowCount}}张</view>
						</view>
						<view class="con_right">
							<view class="con_rightTop">¥{{item.discount/100}}</view>
							<view class="con_rightBottom">满{{item.min/100}}可用</view>
						</view>
						<view class="circle_l"></view>
						<view class="circle_r"></view>
					</view>
					<view class="tips">
						<view>全品类可用</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="page-bottom">
			<view class="page-content">
				<view class="p-b-btn">
					<view @click="homes()">
						<view class="btnImg">
							<image src="../../static/tab-home.png" mode=""></image>
						</view>
						<view><text>首页</text></view>
					</view>
					<view @click="shop()">
						<view class="btnImg">
							<image src="../../static/tab-cart.png" mode=""></image>
						</view>
						<view><text>购物车</text></view>
					</view>
					<view @click="collect()">
						<view class="btnImg">
							<image :src="'../../static/'+[judge?'爱心':'shochang']+'.png'" mode=""></image>
						</view>
						<view><text>收藏</text></view>
					</view>
				</view>
				<view class="p-b-right">
					<view class="p-right-content">
						<view @click="addOrder()"><text>立即购买</text></view>
						<view>|</view>
						<view @click="addShopping()"><text>加入购物车</text></view>
					</view>
				</view>      
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			uniNumberBox,
		},
		data() {
			return {
				allChecked: true,
				join: false, //加入
				buy: false, //购买
				id: "",
				num: '',
				Token: '',
				iscount: false,
				addDiscount: [], //优惠卷
				show: false,
				specification: 0,
				details: [],
				detaila: [],
				appraisePage: [],
				spuId: '',
				merchandise: {},
				skuList: [],
				judge:"",//判断收藏参数
				merchan:[],
				eid:''
			}
		},
		onLoad(e) {
			console.log(e)
			this.eid = e
			this.Token = uni.getStorageSync('Token')
			uni.showLoading({
				title: '加载中.....'
			})
			uni.request({
				url: this.$C.webUrl + `m.api?_gp=goods&_mt=getGoods&spuId=${e.id}`,
				success: (res) => {
					console.log(res)
					this.id= res.data.data.id
					uni.hideLoading()
					this.details = res.data.data
					let addils = res.data.data.detail
					// 查找字符转格式
					var add = ''
					this.skuList = res.data.data.skuList
					for (let i in this.skuList) {
						add = this.skuList[i]
					}
					this.spuId = add.id
					const addimg = new RegExp('<img', 'ig')
					const addwidth = new RegExp('width=', 'gi')
					const addheight = new RegExp('height=', 'gi')
					addils = addils.replace(addimg, "<img class='addma'")
					addils = addils.replace(addwidth, "width='100%'a=")
					addils = addils.replace(addheight, "height='100%'a=")
					this.detaila = addils
				}
			})
			uni.request({
				url: this.$C.webUrl + 'm.api?_gp=coupon&_mt=getObtainableCoupon',
				header: {
					'accessToken': this.Token
				},
				success: (res) => {
					this.addDiscount = res.data.data
				}
			})
		},
		onShow() {
			// 判断收藏的状态
			uni.request({
				url: this.$C.webUrl + `m.api?_gp=collect&_mt=getCollectBySpuId&spuId=${this.eid.id}`,
				header: {
					'accessToken': this.Token
				},
				success: (res) => {
					this.judge = res.data.data
				},
			})
		},
		methods: {
			// 收藏
			collect() {
				let _this=this;
				// 判断他的状态如何是true就删除是false就添加
				if(_this.judge==true){
					uni.request({
						url: _this.$C.webUrl + `m.api?_gp=collect&_mt=deleteCollect&spuId=${this.id}`,
						header: {
							'accessToken': _this.Token
						},
						success: (res) => {
							console.log('删除')
							_this.judge = !_this.judge
						}
					})
				}else{
					uni.request({
						url: _this.$C.webUrl + `m.api?_gp=collect&_mt=addCollect&spuId=${this.id}`,
						header: {
							'accessToken': _this.Token
						},
						success: (res) => {
							console.log('添加')
							_this.judge = true
						},
					})
				}
			},
			bindChange(e) {
				this.num = e
			},
			addOrder() {
				this.buy = true
				this.show = true
				// uni.navigateTo({
				// 	url: '../order/index?id=' + this.id
				// })
			},
			shop() {
				uni.switchTab({
					url: '../shopping/shopping'
				})
			},
			homes() {
				uni.switchTab({
					url: '../home/home'
				})
			},
			addShopping() {
				this.join = true, //加入
					this.show = true
			},
			mask() { //遮罩层
				this.iscount = false
				this.show = false
			},
			comment() {
				uni.navigateTo({
					url: '../comment/index'
				})
			},
			discount() { //优惠劵
				this.iscount = true
			},
			discounts() {
				uni.request({
					url: this.$C.webUrl + `m.api?_gp=coupon&_mt=getUserCoupons `,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						if (res.data.errmsg == '成功') {
							uni.showToast({
								title: '领取成功',
								duration: 2000
							})
						}
					}
				})
			},
			rowsSelect() { //选择器
				this.show = true
			},
			//完成
			creates() {
				//订单数据
				 let merchan = {
					skuId: this.skuList[0].id,
					title: this.details.title,
					num: this.num,
					originalPrice: this.skuList[0].originalPrice,
					vipPrice: this.skuList[0].vipPrice,
					price: this.skuList[0].price,
					skuTitle: this.skuList[0].title, //帮安装
					spuImg: this.details.imgList[0], //img
					stock: this.skuList[0].stock,
					spuId: this.skuList[0].spuId,
					categoryId: this.details.categoryId,
					categoryIdList: this.details.categoryIds,
				}
				if (this.join == true) {
					uni.request({
						url: this.$C.webUrl + `m.api?_gp=cart&_mt=addCartItem&skuId=${this.skuList[0].id}&num=${this.num}`,
						header: {
							'accessToken': this.Token
						},
						success: (res) => {

						}
					})
				} else {
					let merchandise = JSON.stringify(
						[{...merchan}]
					)
					console.log(merchandise)
					uni.navigateTo({
						url: '../order/index?id=' + merchandise
					})
				}
				this.show = false
			},
			specific(e) {
				this.specification = e
			},
		}
	}
</script>

<style>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.2;
	}

	.right .namecon {
		color: #000000;
		font-size: 28upx;
	}

	.right .name {
		color: #000000;
		font-size: 28upx;
		color: #909399;
	}

	.e-header .tip text {
		margin: 0px 10upx;
	}

	.e-header .tit {
		color: #000000;
	}

	.e-header {
		width: 90%;
		line-height: 100upx;
		margin: auto;
		color: #909399;
		display: flex;
		font-size: 30upx;
		justify-content: space-between;
	}

	.bot {
		width: 530upx;
		display: flex;
		justify-content: space-between
	}

	.icon-you {
		width: 100%;
		font-size: 27upx;
		line-height: 60upx;
		color: #909399;
		display: flex;
	}

	.eva-box {
		width: 90%;
		margin: auto;
	}

	.eva-section {
		width: 100%;
		/* 		border-top: 15upx #ECECEC solid;
		border-bottom: 15upx #ECECEC solid; */
	}

	.eva-section image {
		width: 100upx;
		height: 100upx;
		border-radius: 50upx;
		margin-right: 20px;
	}

	.p-right-content {
		width: 95%;
		color: #FFFFFF;
		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
		margin: 12upx 0px;
		line-height: 75upx;
		justify-content: space-around;
		display: flex;
		font-size: 30upx;
		border-radius: 50upx;
	}

	.p-b-right {
		width: 55%;
	}

	.p-b-btn {
		width: 40%;
		line-height: 80upx;
		justify-content: space-around;
		display: flex;
	}

	.p-b-btn text {
		font-size: 25upx;

	}

	.btnImg {
		height: 35upx;
		text-align: center;
	}

	.p-b-btn image {
		text-align: center;
		width: 45upx;
		height: 45upx;
	}

	.page-bottom {
		width: 100%;
		height: 130upx;
		position: fixed;
		bottom: 0upx;
	}

	.page-content {
		width: 90%;
		height: 100upx;
		margin: auto;
		border-radius: 20upx;
		display: flex;
		justify-content: space-around;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	}

	.circle_l {
		width: 28upx;
		height: 28upx;
		border-radius: 50upx;
		background: #C2C2C2;
		left: -33upx;
		top: 88upx;
		position: absolute;
	}

	.circle_r {
		width: 28upx;
		height: 28upx;
		border-radius: 50upx;
		background: #C2C2C2;
		right: -33upx;
		top: 88upx;
		position: absolute;
	}

	.tips {
		font-size: 25upx;
		padding: 0px 20upx;
		color: #909399;
	}

	.con_rightTop {
		font-size: 40upx;
		color: #FA436A;
		margin: auto;
		text-align: center;
	}

	.con_rightBottom {
		font-size: 28upx;
		color: #606266;
		text-align: center;
	}

	.con_leftDottom {
		font-size: 25upx;
		color: #909399;
	}

	.con_leftTop {
		font-size: 33upx;
	}

	.con_left {
		width: 80%;
		line-height: 48upx;
	}

	.con_right {
		width: 25%;
	}

	.con {
		width: 95%;
		height: 100upx;
		position: relative;
		border-bottom: 1px dashed #919192;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		background: #FFFFFF;
	}

	.coupon-item {
		width: 100%;
		height: 180upx;
		flex-wrap: wrap;
		display: flex;
		margin: 20upx 0px;
		background: #FFFFFF;
	}

	>>>.mask_show {
		width: 100%;
		height: 900upx;
		position: fixed;
		bottom: 0px;
		z-index: 9999 !important;
		background: #F3F3F3;
	}

	.mask-content {
		width: 90%;
		height: 100%;
		margin: auto;
	}

	.detail {
		width: 100%;
		height: 100%;
		margin-bottom: 150upx;
	}

	.speci {
		color: #EE0A24;
	}

	.confirm-btns {
		width: 320px;
		height: 38px;
		line-height: 38px;
		border-radius: 50px;
		margin-top: 35px;
		background: #fa436a;
		color: #fff;
		font-size: 16px;
		text-align: center;
	}

	.popup_spec {
		position: fixed;
		bottom: 0px;
		z-index: 9999;
		width: 100%;
		height: 700upx;
		border-radius: 30upx 30upx 0px 0px;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0upx 0upx;
	}

	.popup_top {
		width: 100%;
		display: flex;
	}

	.popup_Name {
		width: 100%;
		padding: 40upx 0;
		font-size: 30upx;
		color: #888889;
	}

	.popup_man {
		width: 90%;
		margin: auto;
	}

	.popup_man .popup_manImg {
		width: 220upx;
		position: relative;
		top: -20px;
		border-radius: 20upx 20upx 0px 0px;
	}

	.popup_manlist {
		width: 500upx;
		margin-left: 30upx;
		color: #606266;
		font-size: 30upx;
	}

	.uni-number {
		width: 100%;
		font-size: 30upx;
		color: #888889;
	}

	.uni-number view {
		padding-bottom: 10upx;
	}

	>>>.popup_manImg image {
		width: 170upx !important;
		height: 180upx !important;
		border-radius: 10upx 10upx 0px 0px;
	}

	.popup_manName {
		width: 90%;
		display: flex;
	}

	.popup_manText {
		padding: 10upx 20upx;
		background: #DCDCDC;
		border-radius: 30upx;
		color: #303133;
		margin-left: 20upx;
	}

	.popup_manName text {
		width: 80%;
		display: inline;
	}

	>>>.addma {
		width: 95% !important;
	}

	.rich-img {
		width: 100%;
		height: 100%;
	}

	.detail-desc {
		width: 100%;
		height: 100%;
	}

	.uni-common-mt {
		width: 100%;
	}

	.d-header {
		width: 100%;
		height: 100upx;
	}

	.d-header view {
		width: 20%;
		padding: 13px 80upx;
		/* text-decoration:line-through; */
		border-bottom: 1px solid #000000;
		line-height: 90upx;
		margin: 3px auto;
		position: relative;
	}

	.d-header text {
		width: 150upx;
		height: auto;
		padding: 0px 13upx;
		background: #FFFFFF;
		position: absolute;
		top: 3px;
		left: 35px;
	}

	.c-list {
		width: 100%;
		/* height: 300upx; */
		/* border: 1px solid #000000; */
	}

	.c-row {
		width: 100%;
		height: 22%;
		border: 1px solid #ECECEC;
		display: flex;
	}

	.c-rows {
		padding: 0px 30upx;
		display: flex;
		line-height: 67upx;
		font-size: 27upx;
		color: #909399;
	}

	.c-rows text {
		color: #000000;
		width: 450upx;
	}

	.detail_content {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 700upx;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
		/* background: #000000; */
	}

	.image-wrapper image {
		width: 100%;
		height: 100%;
	}

	.introduce-section {
		width: 90%;
		line-height: 60upx;
		padding: 20upx 40upx;
		/* border: 1px solid #000000; */
	}

	.section_neam {
		width: 300upx;
		display: flex;
	}

	.section_neam text {
		color: #fa436a;
	}

	.section_special {
		width: 80upx;
		height: 38upx;
		border-radius: 30upx;
		background: #fa436a;
		margin-top: 10upx;
		position: relative;
	}

	.section_special view {
		color: #FFFFFF;
		font-size: 25upx;
		text-align: center;
		position: absolute;
		top: -8upx;
		left: 8upx;
	}

	.section_text {
		width: 400upx;
		display: flex;
		color: #909399;
		font-size: 27upx;
		justify-content: space-between;
	}
</style>
